<template>
  <view class="viewport">
    <!-- 地址信息 -->
    <view class="form">
      <view class="form-item">
        <text class="label">姓名</text>
        <input v-model="form.receiver" placeholder-style="color: #888" placeholder="请填写收货人姓名" />
      </view>
      <view class="form-item">
        <text class="label">手机号码</text>
        <input v-model="form.contact" placeholder-style="color: #888" placeholder="请填写收货人手机号码" />
      </view>
      <view class="form-item">
        <text class="label">省/市/县 (区)</text>
        <picker @change="regionChange" mode="region">
          <view v-if="form.fullLocation" class="region">
            {{ form.fullLocation }}
          </view>
          <view v-else class="placeholder"> 请填写收货人所在城市 </view>
        </picker>
      </view>
      <view class="form-item">
        <text class="label">详细地址</text>
        <input v-model="form.address" placeholder-style="color: #888" placeholder="街道、楼牌号信息" />
      </view>
      <view class="form-item">
        <text class="label">设置默认地址</text>
        <switch @change="isDefaultChange" :checked="form.isDefault === 1" color="#27ba9b" />
      </view>
    </view>
    <!-- 提交按钮 -->
    <view class="button" @tap="submitFrom"> 保 存 </view>
  </view>
</template>

<script>
import { addAddress, getAddressDetail, editAddress } from '@/api/address'
export default {
  data() {
    return {
      form: {
        // 详细地址
        address: '',
        // 地址标签,以英文逗号分割
        // addressTags: '',
        // 所在城市编码
        cityCode: '',
        // 联系方式
        contact: '',
        // 所在区/县编码
        countyCode: '',
        // 是否为默认，1为是，0为否
        isDefault: 0,
        // 邮政编码
        postalCode: '',
        // 所在省份编码
        provinceCode: '',
        // 收货人姓名
        receiver: '',
        fullLocation: ''
      }
    }
  },

  /** 如果是修改地址，可以获取到id */
  async onLoad({ id }) {
    if (id) {
      let res = await getAddressDetail(id)
      this.form = res.result
      uni.setNavigationBarTitle({ title: '修改地址' })
    }
  },

  methods: {
    regionChange(ev) {
      // console.log(ev)
      this.form.provinceCode = ev.detail.code[0]
      this.form.cityCode = ev.detail.code[1]
      this.form.countyCode = ev.detail.code[2]
      this.form.fullLocation = ev.mp.detail.value.join('')
      this.form.postalCode = ev.mp.detail.postcode
    },
    isDefaultChange(ev) {
      // console.log(ev)
      if (ev.detail.value) {
        this.form.isDefault = 1
      } else {
        this.form.isDefault = 0
      }
    },
    /** 提交表单，新增地址 */
    async submitFrom() {
      let params = { ...this.form }
      delete params.fullLocation
      /** 修改地址 */
      if (this.form.id) {
        delete params.id
        let res = await editAddress(this.form.id, params)
        uni.showToast({
          title: '修改成功！'
        })
      } else {
        /** 新增地址 */
        let res = await addAddress(params)
        uni.showToast({
          title: '新增成功！'
        })
      }
      setTimeout(() => {
        uni.navigateBack()
      }, 1500)
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #f4f4f4;
}
.form {
  margin: 20rpx 20rpx 0;
  padding: 0 20rpx;
  border-radius: 10rpx;
  background-color: #fff;
  .form-item {
    display: flex;
    min-height: 96rpx;
    line-height: 46rpx;
    padding: 25rpx 10rpx;
    background-color: #fff;
    font-size: 28rpx;
    border-bottom: 1rpx solid #ddd;
    position: relative;
    &:last-child {
      border: none;
    }
    .label {
      width: 200rpx;
      color: #333;
    }
    input {
      flex: 1;
      display: block;
      height: 46rpx;
    }
    switch {
      position: absolute;
      right: -10rpx;
      transform: scale(0.7) translateY(-8px);
    }
    picker {
      flex: 1;
    }
    .region {
      color: #333;
    }
    .placeholder {
      color: #888;
    }
  }
}
.button {
  height: 80rpx;
  text-align: center;
  line-height: 80rpx;
  margin: 30rpx 20rpx;
  color: #fff;
  border-radius: 80rpx;
  font-size: 30rpx;
  background-color: #27ba9b;
}
</style>
